<template>
	<div class="BankContainer">
		<x-header :left-options="{showBack:false}" title="我的银行卡" class="header vux-1px-b">
			<a slot="left" @click="back"><i class="tp-icon icon-black-back"></i></a>
			<a slot="right" href="#/AddCardCert"><i class="tp-icon icon-add-card"></i></a>
		</x-header>
		<div class="bankList">
			<ul class="bank_msg_box">
				<li class="comCard" v-for="item in cardList" v-bind:style="{'background-image':'url(' + item.background + ')'}">
					<div class="shade">
						<img :src="item.shade" alt="" />
					</div>
					<div class="bank_msg">
						<div class="bg_img">
							<img :src="item.images" class="img" />
						</div>
						<div class="bank_type">
							<p class="card_type">{{item.name}}</p>
							<span class="card_cx">储蓄卡</span>
							<span class="card_dot">**** **** ****&nbsp;&nbsp;</span>
							<span class="card_num"> {{identify_card.substr(16)}}</span>
						</div>
					</div>
				</li>
				<li class="instructions">
					<a href="#">支持银行及限额说明</a>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import { XHeader } from 'vux'
	const cardList = [{
			images: require('../assets/images/home/ICBC.png'),
			name: '中国工商银行',
			background: require('../assets/images/home/card_bg1.png'),
			shade: require('../assets/images/home/ICBC_white.png')
		},
		{
			images: require('../assets/images/home/ABC.png'),
			name: '中国农业银行',
			background: require('../assets/images/home/card_bg3.png'),
			shade: require('../assets/images/home/ABC_white.png')
		},
		{
			images: require('../assets/images/home/CCB.png'),
			name: '中国建设银行',
			background: require('../assets/images/home/card_bg2.png'),
			shade: require('../assets/images/home/CCB_white.png')
		},
		{
			images: require('../assets/images/home/CMB.png'),
			name: '中国招商银行',
			background: require('../assets/images/home/card_bg1.png'),
			shade: require('../assets/images/home/CMB_white.png')
		},
		{
			images: require('../assets/images/home/BOB.png'),
			name: '北京银行',
			background: require('../assets/images/home/card_bg1.png'),
			shade: require('../assets/images/home/BOB_white.png')
		},
		{
			images: require('../assets/images/home/Bank.png'),
			name: '中国光大银行',
			background: require('../assets/images/home/card_bg1.png'),
			shade: require('../assets/images/home/Bank_white.png')
		},
		{
			images: require('../assets/images/home/CGB.png'),
			name: '中国广发银行',
			background: require('../assets/images/home/card_bg1.png'),
			shade: require('../assets/images/home/CGB_white.png')
		},
		{
			images: require('../assets/images/home/HB.png'),
			name: '华夏银行',
			background: require('../assets/images/home/card_bg1.png'),
			shade: require('../assets/images/home/HB_white.png')
		},
		{
			images: require('../assets/images/home/BCM.png'),
			name: '中国交通银行',
			background: require('../assets/images/home/card_bg2.png'),
			shade: require('../assets/images/home/BCM_white.png')
		},
		{
			images: require('../assets/images/home/CMBC.png'),
			name: '中国民生银行',
			background: require('../assets/images/home/card_bg2.png'),
			shade: require('../assets/images/home/CMBC_white.png')
		},
		{
			images: require('../assets/images/home/BON.png'),
			name: '宁波银行',
			background: require('../assets/images/home/card_bg1.png'),
			shade: require('../assets/images/home/BON_white.png')
		},
		{
			images: require('../assets/images/home/PAB.png'),
			name: '中国平安银行',
			background: require('../assets/images/home/card_bg1.png'),
			shade: require('../assets/images/home/PAB_white.png')
		},
		{
			images: require('../assets/images/home/SPDB.png'),
			name: '浦发银行',
			background: require('../assets/images/home/card_bg2.png'),
			shade: require('../assets/images/home/SPDB_white.png')
		},
		{
			images: require('../assets/images/home/CIB.png'),
			name: '兴业银行',
			background: require('../assets/images/home/card_bg2.png'),
			shade: require('../assets/images/home/CIB_white.png')
		},
		{
			images: require('../assets/images/home/PSBC.png'),
			name: '中国邮政储蓄银行',
			background: require('../assets/images/home/card_bg3.png'),
			shade: require('../assets/images/home/PSBC_white.png')
		},
		{
			images: require('../assets/images/home/BOC.png'),
			name: '中国银行',
			background: require('../assets/images/home/card_bg1.png'),
			shade: require('../assets/images/home/BOC_white.png')
		},
		{
			images: require('../assets/images/home/ECITIC.png'),
			name: '中信银行',
			background: require('../assets/images/home/card_bg1.png'),
			shade: require('../assets/images/home/ECITIC_white.png')
		},
	]
	export default {
		name: 'MyBankCard',
		data() {
			return {
				cardList: cardList,
				identify_card: '1111222233334444555'
			}
		},
		components: {
			XHeader
		},
		mounted() {
			console.log('**** **** **** ' + this.identify_card.substr(16));
		},
		methods: {
			back: function() {
				window.history.go(-1);
			},
		}
	}
</script>

<style scoped lang="less">
	.BankContainer {
		.header {
			background: #fff;
		}
		/*银行卡列表*/
		.bankList {
			background: #fff;
			.bank_msg_box {
				padding: 0.26rem;
				z-index: 999;
				.comCard {
					width: 9.46rem;
					height: 3.48rem;
					margin-bottom: 0.26rem;
					padding: 0.77rem 1.54rem 0.77rem 0.8rem;
					border-radius: 10px;
					position: relative;
					overflow: hidden;
					.shade {
						position: absolute;
						top: 0.9rem;
						right: 0;
						width: 4.82rem;
						overflow: hidden;
						z-index: 555;
						opacity: 0.1;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.bank_msg {
						width: 7.12rem;
						height: 1.93rem;
						color: #ffffff;
						.bg_img {
							width: 0.93rem;
							height: 0.93rem;
							background: #fff;
							border-radius: 50%;
							float: left;
							margin-top: 0.05rem;
							.img {
								width: 0.64rem;
								height: 0.64rem;
								margin: 0.14rem;
							}
						}
						.bank_type {
							float: left;
							width: 82%;
							margin-left: 0.26rem;
							.card_type {
								font-size: 0.45rem;
							}
							.card_cx {
								display: block;
								font-size: 0.32rem;
							}
							.card_dot {
								margin-top: 0.58rem;
								display: block;
								float: left;
								font-size: 0.56rem;
							}
							.card_num {
								display: inline-block;
								margin-top: 0.42rem;
								font-size: 0.56rem;
								vertical-align: bottom;
							}
						}
					}
				}
				/*说明*/
				.instructions {
					position: absolute;
					left: 50%;
					margin-left: -1.75rem;
					margin-top: 0.5rem;
					margin-bottom: 0.28rem;
					a {
						font-size: 0.36rem;
						color: #eb624f;
					}
				}
			}
		}
	}
</style>